<template lang="pug">
ul.navbar.nav-fixed
  //- el-popover(
      popper-class="navbar-tooltip-pop"
      placement="bottom"
      effect="light"
      ref="shop"
      content="运营商（门店）卖给消费者的价格"
    )
  //- el-popover(
      popper-class="navbar-tooltip-pop"
      placement="bottom"
      effect="light"
      ref="selling"
      content="工厂给运营商（门店）的价格"
    )
  li.navbar-item(
    v-for="item in navbar"
  ) 
    span {{item}}
    //- span.navbar-item-tip.icon-info(
        v-if="item === 'selling_price'"
        ref="sellingElm"
        @mouseover="mouseoverSelling"
        @mouseout="mouseoutSelling"
      )
    //- span.navbar-item-tip.icon-info(
        v-if="item === 'shop_price'"
        ref="shopElm"
        @mouseover="mouseoverShop"
        @mouseout="mouseoutShop"
      )
  li.navbar-item(v-if="!isHandle") 操作
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'navbar',
  props: {
    isHandle: {
      type: Boolean,
      default: false
    },
    navbar: Array, // 导航
    index: Number, // 用于标记下拉框数据存放的位置
    token: String // 用于排序时请求下拉框数据
  },
  methods: {
    mouseoverSelling () {
      this.$refs.shop.doClose()
      if(this.$refs && this.$refs.selling) {
      	this.$refs.selling.referenceElm = this.$refs.sellingElm[0]
      	this.$refs.selling.doToggle()
      }
    },
    mouseoutSelling () {
      this.$refs.selling.doClose()
    },
    mouseoverShop () {
      this.$refs.selling.doClose()
      if(this.$refs && this.$refs.shop) {
      	this.$refs.shop.referenceElm = this.$refs.shopElm[0]
      	this.$refs.shop.doToggle()
      }
    },
    mouseoutShop () {
      this.$refs.shop.doClose()
    },
  }
}
</script>

<style scoped lang="scss">
.navbar {
  margin-top: 15px;
  font-size: 12px;
  display: flex;
  align-items: center;
}
.navbar-item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  min-width: 100px;
  background: #EFEFEF;
  border: 1px solid #DDDDDD;
  border-right: none;
  flex: 1;
  &:last-child {
    border-right: 1px solid #DDDDDD;
  }
}
.navbar-item-important {
  color: #FF2929;
}
.navbar-item-tip {
  font-size: 14px;
  color: #000;
  margin-left: 10px;
}
</style>
<style lang="scss">
.navbar-tooltip-pop {
  padding: 12px !important;
  &.is-light {
    background: #FFFFFF;
    border: 1px solid #E4E7ED;
    box-shadow: 0 2px 12px 0 rgba(0,0,0,0.06);
    & .popper__arrow {
      border-bottom-color: #E4E7ED !important;
    }
  }
  &.el-tooltip__popper.is-light[x-placement^="bottom"] .popper__arrow {
    border-top-color: #E4E7ED !important;
  }
}
</style>
